<template>

  <router-link :to="item.path">
    <i> {{item.iconText}} </i>
    <p> {{item.tabText}}</p>
  </router-link>

</template>
<script>
export default {
  name: 'icon',
  props: {
    item: Object
  },
  setup() {}
}
</script>
<style lang="less" scoped>
a {
  color: #999;
}
i {
  display: inline-block;
  text-align: center;
  width: 24px;
  height: 24px;
  line-height: 24px;
  border-radius: 50%;
  background-color: #ddd;
}
.router-link-active {
  color: #d04040;
  i {
    background: #d04040;
    color: #fff;
  }
}
</style>
